<template>
  <view class="box p-x-32 p-y-33 p-t-32">
    <uv-navbar placeholder title="申请退款" bgColor="#FFF" :autoBack="true"></uv-navbar>
    <view class="refundSubmis p-30">
      <view>
        <view class="flex justify-bet">
          <view class="font-32">
            原因说明
          </view>
          <view class="font-26 text-greey">
            {{ form.value.length || 0 }}/100
          </view>
        </view>
        <view class="m-t-20">
          <uv-textarea :customStyle="fomData.customStyle" height="200rpx" v-model="form.value" placeholder="请填写原因说明"
            maxlength="100"></uv-textarea>
        </view>
      </view>
      <view class="m-t-30">
        <view class="flex justify-bet">
          <view class="font-32">
            图片(选填，提供问题和截图)
          </view>
          <view class="font-26 text-greey">
            {{ form.fileList.length || 0 }}/4
          </view>
        </view>
        <view class="m-t-20">
          <uv-upload :fileList="form.fileList" name="6" multiple :maxCount="4" width="173rpx" height="173rpx"
            @afterRead="handleAfterRead" @delete="deletePic">
            <uv-image :src="ASSETSURL + 'uploadIcon.png'" width="173rpx" height="173rpx"></uv-image>
          </uv-upload>
        </view>
      </view>
    </view>
    <view class="submit fixed-bottom-50" @click="handleSubmit">
      申请退款
    </view>
  </view>
</template>

<script setup>
import { LoginCenterApi } from '@/api/serves'
import { applyRefund } from '@/api/api'
import { ref, onMounted, reactive, getCurrentInstance } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';

// 获取全局工具方法
const { proxy } = getCurrentInstance()
const $tool = proxy.$tool
const form = ref({
  value: '',
  fileList: []
})
const fomData = reactive({
  customStyle: {
    'background': '#F8F8F8',
  }
})
const order_sn = ref('') //订单号
const checkboxValue = ref([])//选中的商品
onLoad((options) => {
  if (options.order_sn) {
    order_sn.value = options.order_sn;
  }
  if (options.checkboxValue) {
    checkboxValue.value = JSON.parse(decodeURIComponent(options.checkboxValue));
  }
})
// 删除图片
const deletePic = (e) => {
  const isUploading = form.value.fileList.some(file => file.status === 'uploading');
  if (isUploading) {
    $tool.alert('图片上传中，请稍后再试');
    return;
  }
  form.value.fileList.splice(e.index, 1)
}
//图片上传
const handleAfterRead = async (e) => {
  console.log(e, '---上传图片---');

  let lists = [].concat(e.file)
  let fileListLen = form.value.fileList.length
  lists.forEach((item) => {
    form.value.fileList.push({
      ...item,
      status: 'uploading',
      message: '上传中'
    })
  })
  for (let i = 0; i < lists.length; i++) {
    try {
      const { code, data, msg } = await LoginCenterApi.uploadImg({
        filePath: lists[i].url, // 要上传文件资源的路径。
        name: 'file' // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
      })
      if (code !== 1) {
        $tool.alert(msg)
      }
      console.log(data, '---头像上传处理---');
      form.value.fileList[fileListLen] = {
        ...form.value.fileList[fileListLen],
        status: 'success',
        message: '',
        url: data.src
      }
      fileListLen++
    } catch (error) {
      console.error('上传失败', error)
      $tool.alert('上传失败，请重试')
    }
  }
}

// 提交
const handleSubmit = () => {
  const isUploading = form.value.fileList.some(file => file.status === 'uploading');
  if (isUploading) {
    $tool.alert('图片上传中，请稍后再试');
    return;
  }
  console.log('Form submitted');
  applyRefund({
    order_sn: order_sn.value,
    refund_reason_wap: form.value.value,
    refund_reason_wap_img: form.value.fileList.map(item => item.url),
    product: checkboxValue.value
  }).then(res => {
    if (res.code === 1) {
      $tool.alert('提交成功')
      setTimeout(() => {
        route('/pagesA/pages/originality/myOrder')
      }, 1000)
    } else {
      $tool.alert(res.msg)
    }
  })
}
</script>

<style lang="scss">
::v-deep .uv-image__image {
  border-radius: 12rpx !important;
}

::v-deep .uv-upload__wrap__preview__image {
  border-radius: 12rpx !important;
}

.box {
  min-height: 100vh;
  background: #F8F8F8;
}

.refundSubmis {
  width: 686rpx;
  // height: 666rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  margin: 0 auto;
}
</style>
